<template>
  <el-card shadow="hover">
    <template v-slot:header>
      <div class="k-title">用户使用排行榜</div>
    </template>
    <div ref="chartRef" style="width: 100%; height: 13vh" />
  </el-card>
</template>

<script setup lang="ts">
import { useDark, useECharts } from "@pureadmin/utils";
import { ref, computed, onMounted } from "vue";
import { colorArr, realWH } from "@/utils";
const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();

const props = defineProps({
  data: { type: Array, default: () => [] }
});

// 数据
const names = computed(() => data.value.map((item: any) => item.name ?? ""));
const data = computed(() =>
  props.data.map((item: any) => {
    const list = props.data.map((item: any) => ({
      value: item.lendCount,
      name: item.userNickName
    }));

    list.sort((a: any, b: any) => b.value - a.value);
    if (list.length > 10) {
      return list.slice(0, 10);
    }
    return list;
  })
);
const { setOptions } = useECharts(chartRef, {
  theme,
  renderer: "svg"
});

const initData = () => {
  const fontSize = realWH(16).h;
  setOptions({
    color: colorArr,

    legend: {
      data: names.value,
      orient: "vertical",
      left: "0",
      type: "scroll",
      icon: "circle",
      textStyle: {
        color: "#FFFFFF",
        fontSize
      },
      itemWidth: realWH(14).h,
      itemHeight: realWH(14).h,
      itemStyle: {
        borderWidth: 0
      }
      // formatter: function (name) {
      //   const temp = data.value.find(ele => ele.name === name);
      //   return `${name}/${temp?.value ?? 0}`;
      // }
    },
    tooltip: {
      trigger: "item" // formatter: "{b} : {c}"
    },
    series: [
      {
        type: "funnel",
        label: {
          show: true,
          fontSize: realWH(12).h,
          position: "inner" // formatter: "{c}"
        },
        width: "70%",
        height: "95%",

        data: data.value as any,
        itemStyle: {
          borderWidth: 0
        },
        minSize: "10%",
        maxSize: "90%",
        left: "28%",
        right: "0%",
        top: "0%"
      }
    ]
  });
};
onMounted(() => {
  initData();
});
</script>
